import { Text, StyleSheet, View, Button, TouchableOpacity, Image, FlatList, Dimensions } from 'react-native'
import React, { Component } from 'react'
import { getNews } from '../../utils/api'
import Loading from '../../components/Loading'
import Ionicons from 'react-native-vector-icons/Ionicons'

export default class News extends Component {
  constructor() {
    super()

    this.state = {
      type: 'top',
      list: [],
      types: [
        {key: 'top', title: '头条'},
        {key: 'shehui', title: '社会'},
        {key: 'guonei', title: '国内'},
        {key: 'guoji', title: '国际'},
        {key: 'yule', title: '娱乐'},
        {key: 'tiyu', title: '体育'},
        {key: 'junshi', title:  '军事'},
        {key: 'keji', title: '科技'},
        {key: 'caijing', title: '财经'},
        {key: 'shishang', title: '时尚'}
      ],
      initIndex: 0
    }
  }

  componentDidMount() {
    this.getList()
  }

  getList = () => {
    const type = this.state.type
    getNews(type).then(res => {
      console.log(res)
      this.setState({
        list: res
      })
    }).catch(err => {
      alert(JSON.stringify(err))
    })
  }

  newsItem = ({index, item}) => {
    if (item.thumbnail_pic_s03) {
      return this.newsItemThreeImages({index, item})
    } else {
      return this.newsItemSingleImage({index, item})
    }
  }

  newsItemSingleImage = ({index, item}) => {
    return (
      <TouchableOpacity
        onPress={() => this.props.navigation.navigate('DetailScreen', {
          url: item.url,
          title: item.title,
          uniquekey: item.uniquekey
        })}
      >
        <View style={[styles.item1]}>
          <View style={[styles.item1Text]}>
            <Text
              style={[styles.item1Title]}
              numberOfLines={2}
            >{item.title}</Text>
            <View style={[styles.item1Footer]}>
              <Text style={[styles.item1Meta]}>{item.date}{item.author_name}</Text>
              <Ionicons name="heart-outline" size={18}></Ionicons>
            </View>
          </View>
          <Image
            source={{uri: item.thumbnail_pic_s}}
            style={[styles.item1Image]}
          />
        </View>
      </TouchableOpacity>
    )
  }

  newsItemThreeImages({index, item}) {
    return (
      <TouchableOpacity
        onPress={() => this.props.navigation.navigate('DetailScreen', {
          url: item.url,
          title: item.title,
          uniquekey: item.uniquekey
        })}
        style={{marginVertical: 5}}
      >
        <View style={[styles.item2]}>
          <Text
            style={[styles.item2Header]}
            numberOfLines={2}
            ellipsizeMode="tail"
          >
            {item.title}
          </Text>
          <View style={[styles.item2ImageContainer]}>
            <Image
              source={{uri: item.thumbnail_pic_s}}
              style={[styles.item2Image]}
            />
            <Image
              source={{uri: item.thumbnail_pic_s02}}
              style={[styles.item2Image]}
            />
            <Image
              source={{uri: item.thumbnail_pic_s03}}
              style={[styles.item2Image]}
            />
          </View>
          <View style={[styles.item2Footer]}>
            <Text style={[styles.item2Meta]}>{item.date} {item.author_name}</Text>
            <Ionicons name={'heart-outline'} size={18} />
          </View>
        </View>
      </TouchableOpacity>
    )
  }

  newsType = ({index, item}) => {
    const isActive = item.key === this.state.type
    return (
      <TouchableOpacity
        onPress={() => {
          this.setState({
            type: item.key,
            initIndex: index > 3 ? index - 3 : 0
          }, () => {
            this.getList()
          })
        }}
      >
        <View style={{width: 65, height: 45, padding: 10, backgroundColor: isActive ? '#fec' : '#fff'}}>
          <Text style={{fontSize: 18, fontWeight: 'bold', color: isActive ? 'red' : '#333', textAlign: 'center'}}>{item.title}</Text>
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    return (
      // <View>
      //   <Text>News</Text>
      //   <Button
      //   title="Go to Details"
      //   onPress={() => this.props.navigation.navigate('DetailScreen')}
      // />
      // </View>
      <>
        {
          this.state.list.length
          ?
          <FlatList
            data={this.state.list}
            renderItem={this.newsItem}
            keyExtractor={item => item.uniquekey}
            ListHeaderComponent={() => {
              return <FlatList
                horizontal={true}
                data={this.state.types}
                keyExtractor={item => item.key}
                renderItem={this.newsType}
                initialScrollIndex={this.state.initIndex}
              />
            }}
            ListFooterComponent={() => {
              return <Text
                style={{
                  fontSize: 20,
                  textAlign: 'center',
                  marginVertical: 30
                }}
              >
                ---- 人家是有底线的 ----
              </Text>
            }}
            ItemSeparatorComponent={() => {
              return <View
                style={{
                  borderBottomWidth: 1,
                  borderBottomColor: '#ccc',
                  marginVertical: 5
                }}
              >
              </View>
            }}
          />
          :
          <Loading />
        }
      </>
    )
  }
}

const styles = StyleSheet.create({
  item1: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginVertical: 10
  },
  item1Text: {
    flexDirection: 'column',
    justifyContent: 'space-between',
    width: Dimensions.get('window').width * 2/3 - 20
  },
  item1Title: {
    paddingHorizontal: 10,
    fontSize: 18,
    width: Dimensions.get('window').width * 2/3,
    marginBottom: 20,
  },
  item1Footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 10
  },
  item1Meta: {
    fontSize: 13
  },
  item1Image: {
    width: Dimensions.get('window').width/3,
    height: 80,
    marginVertical: 5,
    marginHorizontal: 10
  },

  item2: {
    margin: 10
  },
  item2Header: {
    fontSize: 18,
    width: Dimensions.get('window').width - 20
  },
  item2ImageContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  item2Image: {
    width: Dimensions.get('window').width/3 - 20,
    height: 80,
    marginVertical: 10
  },
  item2Footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%'
  },
  item2Meta: {
    fontSize: 13
  }
})